<!-- DynamicTabs.vue -->
<template> 
  <div>
    <el-tabs v-model="localActiveTab" type="card" @tab-remove="handleRemoveTab" @tab-click="handleTabClick">
      <el-tab-pane
        v-for="(tab, index) in tabs"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
        closable
      />
    </el-tabs>
  </div>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
  tabs: {
    type: Array,
    required: true,
  },
  activeTab: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(['update:active-tab', 'remove-tab', 'tab-click']);

const localActiveTab = computed({
  
  get() {
    return props.activeTab;
  },
  set(value) {
    emit('update:active-tab', value);
  },
});

const handleRemoveTab = (targetName) => {
  emit('remove-tab', targetName);
};

const handleTabClick = (tab) => {
  emit('tab-click', tab.paneName); // 使用 tab.paneName
};
</script>

<style scoped>
/* 自定义样式 */
.el-tabs {
  background-color: #fff;
  border-radius: 4px;
}
</style>